<template>
    <div>
        <el-row :gutter="20" v-if="data.length > 0" @scroll="loadMoreData">
            <el-col :span="12" v-for="(item, index) in data" :key="index">
                <div class="boxs radius10 colorFFF marginBottom20">
                    <!-- {{item}} -->
                    <div class="flexFS" style="width: 100%;">
                        <el-avatar :size="55" :src="item.idol_info.avatar"></el-avatar>
                        <div class="color333" style="width: 200px;margin-left:10px">
                            <div class="size16 flexFS colorFFF">
                                {{ item.idol_info.name }}

                                <div class="size10 marginLeft10" style="color: #FFDB5C;">
                                    直播中
                                </div>
                      
                                <!-- <img alt src="@/assets/image/vip-icon.png" srcset style="width: 50px;margin-left:10px"
                                    v-if="item.is_vip" /> -->
                            </div>
                            <div class="colorFFF flexFS" style="margin-top:5px;width: 400px;">
                                <span class="vertical-middle">
                                    <span>ID</span>
                                    <span class="pl-4">{{ item.idol_info.id }}</span>
                                    <i @click="copy(item.idol_info.id)"
                                        class="iconfont icon-fuzhi cursor-pointer copy vertical-middl "
                                        style="font-size: 20px;"></i>
                                </span>
                                <span class=" marginLeft20">
                                    <span>粉丝</span>
                                    <span class="pl-4">{{ item.idol_info.id }}</span>
                                </span>
                                  <span class=" marginLeft20">
                                    <span>作品</span>
                                    <span class="pl-4">{{ item.idol_info.id }}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- <div v-if="type == 'interest'">
                        <div class=" marginBottom20 flexFCC " style="padding: 10px;" v-if="item.idol_info">
                            <el-avatar :size="70" :src="item.idol_info.avatar"></el-avatar>
                            <div class="color333 size14 marginTopBottom5 omit1">{{ item.idol_info.name }}</div>
                            <div class="colorFF8F3E size12 marginTopBottom5">{{ item.idol_info.fans_count }} 粉丝
                            </div>
                            <div @click="cancelAttention(item, index)"
                                class="size12 color999 marginTopBottom5 cursor-pointer" v-if="!item.no_attention">取消关注
                            </div>
                            <div @click="Attention(item, index)" class="size12 colorFF1C6D marginTopBottom5 cursor-pointer"
                                v-else>关注</div>
                        </div>
                    </div> -->
                    <!-- <div v-else>
                        <div class=" marginBottom20 flexFCC " style="padding: 10px;" v-if="item.user_info">
                            <el-avatar :size="70" :src="item.user_info.avatar"></el-avatar>
                            <div class="color333 size14 marginTopBottom5 omit1">{{ item.user_info.name }}</div>
                            <div class="colorFF8F3E size12 marginTopBottom5">{{ item.user_info.fans_count |
                                formatNumber }} 粉丝</div>
                            <div @click="Attention(item, index)" class="size12 colorFF1C6D marginTopBottom5 cursor-pointer"
                                v-if="!item.no_replay && !item.each">关注</div>
                            <div @click="cancelAttention(item, index)"
                                class="size12 color999 marginTopBottom5 cursor-pointer" v-else>取消关注</div>
                        </div>
                    </div> -->
                </div>
            </el-col>
        </el-row>
        <div v-else>
            <el-empty ></el-empty>
        </div>

    </div>
</template>

<script>
import pageTool from '@/mixins/page'
export default {
    mixins: [pageTool],
    data() {
        return {
            query: {},
            empty_image: require('@/assets/image/empty.png'),
        }
    },
    computed: {
        type() {
            return this.$route.query.type ? this.$route.query.type : 'interest'
        },
    },
    mounted() {
        this.beforeInit()
    },
    watch: {
        type() {
            this.query.keyword = null
            this.beforeInit()
        },
    },
    methods: {
        beforeInit() {
            switch (this.type) {
                case 'interest':
                    this.url = '/user-attention/index'
                    break
                default:
                    this.url = '/user-attention/fans_list'
            }
            this.data = []
            this.page = 1
            this.append = true
            this.init() //重新请求数据
        },
        Attention(item, index) {
            item.no_attention = false
            item.no_replay = true
            item.each = 1
            this.$set(this.data, index, item)
            let idol_id = item.user_info ? item.user_info.id : item.idol_info.id
            this.$request
                .post('/user-attention/create/' + idol_id)
                .then((res) => {
                    this.$message.success('关注成功')
                })
                .catch((res) => {
                    item.no_attention = true
                    item.no_replay = false
                })
                .finally((res) => {
                    this.$set(this.data, index, item)
                })
        },

        onJump(url) {
            this.$router.push(url)
        },

        cancelAttention(item, index) {
            item.no_attention = true
            item.no_replay = false
            item.each = 0
            this.$set(this.data, index, item)
            let idol_id = item.user_info ? item.user_info.id : item.idol_info.id
            this.$request
                .del('/user-attention/cancel/' + idol_id)
                .then((res) => {
                    this.$message.info('取关成功')
                })
                .catch((res) => {
                    item.no_attention = true
                    item.no_replay = false
                })
                .finally((res) => {
                    this.$set(this.data, index, item)
                })
        },
        copy(text) {
            const inputElement = document.createElement('input')
            inputElement.value = text
            document.body.appendChild(inputElement)
            inputElement.select()
            document.execCommand('copy')
            document.body.removeChild(inputElement)
            this.$message.success('复制成功')
        },
        loadMoreData(e) {
            if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
                this.page++
                this.init()
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.scroll-window {
    min-height: 500px;
    max-height: 604px;
    overflow-y: scroll;
}

.scroll-window::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}

.boxs {
    background-image: radial-gradient(#2D284B, #151225);
    opacity: 1;
    // filter: blur(100px);
}
</style>